<template>
	<div id="banner">
		<swiper :options="swiperOption"  ref="mySwiper">  
		<!-- 这部分放你要渲染的那些内容 -->  
			<swiper-slide v-for="v in vlunbo" key='$index'>
				<img :src="v.imageUrl">
			</swiper-slide>  
			<!-- 这是轮播的小圆点 -->  
			<div class="swiper-pagination" slot="pagination"></div>  
		</swiper>  
	</div>
</template>
<script type="text/javascript">
import { swiper, swiperSlide } from 'vue-awesome-swiper';
	export default{
		data(){
			return {
				vlunbo:[],
				swiperOption: {  
                //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true  
                notNextTick: true,  
                pagination: '.swiper-pagination',  
                slidesPerView: 'auto',  
                centeredSlides: true,  
                paginationClickable: true,  
                spaceBetween: 30, 
                autoplay: 1000,
             	loopedSlides:6,
             	loop:true,
                }
			}
		},
		methods:{
			request(){
				this.$http({
					url:"/lyf/api/dolphin/list?platform=2&pageCode=H5_HOME&adCode=ad_banner%2Csearchword%2Cad_channel%2Cfloat_tai&companyId=30&areaCode=110114",
					method:"get",
					params:{
						// platform:2,
						// pageCode:'H5_HOME',
						// adCode:'ad_banner%2Csearchword%2Cad_channel%2Cfloat_tail',
						// companyId:30,
						// areaCode:110114
					}
				}).then(function(res){
					console.log(res);
					this.vlunbo = res.body.data.ad_banner;
					console.log(this.vlunbo)
				})
			}
		},
		mounted(){
			this.request();
		},

		components: {  
            swiper,  
            swiperSlide  
        },  
	}
</script>
<style type="text/css" scoped>
	#banner{
		width:100%;
		margin-top: 1.38rem;
	}
	.swiper-slide>img{
		width: 100%;
	}
</style>